import React from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import TopBar from '@components/top-bar';
import Todo from '@components/todo';
import Counter from '@components/counter';
import ReportBar from '@components/report-bar';
import BottomBar from '@components/bottom-bar';

@connect(state => ({
  settings: state.settings
}))
export default class Home extends React.Component {

  static contextTypes = {
    actions: PropTypes.object
  };

  static childContextTypes = {
    settings: PropTypes.object
  };

  getChildContext() {
    return {
      settings: this.props.settings
    };
  }

  render() {

    console.log(`render <${this.constructor.name}/> once`);

    const {
      toggleTodo,
      removeTodo
    } = this.context.actions.todos;

    return (
        <div className="hello">
          <div className="hello-wrap">
            <TopBar />
            <Todo
                onToggle={toggleTodo}
                onRemove={removeTodo}
            />
            <Counter />
            <ReportBar />
            <BottomBar />
          </div>
        </div>
    );
  }

}
